<template>
  <div id="app">
    <Head>提现</Head>
    <div style="background-color: #F7F7F7;">
      <div class="top">
        <div class="top_box">
          <div class="top_title">累计赚钱（元）</div>
          <div class="top_money">{{total_money}}</div>
        </div>
      </div>
      <div class="operation">
        <div class="operation_money">待提现：￥{{money}}</div>
        <div class="operation_button" @click="handlerJump('/member/RedEnvelopes/withdrawal')">提现</div>
      </div>
    </div>

    <div class="list">
        <div class="list_top">
            <div @click="bindEnvelopes()" :class="envelopes">红包记录</div>
            <div @click="bindWithdrawal()" :class="withdrawal">提现记录</div>
        </div>
        <div class="list_center" v-if="is_envelopes">
          <van-list
            v-if="redEnvelope.length > 0"
            v-model="loading"
            :finished="finished"
            :finished-text="finished_text"
            @load="onLoad"
            :immediate-check="true"
          >
          <div class="list_content" v-for="(item,index) in redEnvelope" :key="index">
              <div class="list_content_title">
                <div class="list_content_titles">{{item.content}}</div>
                <div class="list_content_title_time">发放：{{item.addtime | timeFilter}}</div>
              </div>
              <div v-if="item.op == 1" class="list_content_money">+{{item.money}}</div>
              <div v-if="item.op == 2" class="list_content_money">-{{item.money}}</div>
          </div>
          </van-list>
          <div class="notis" v-if="redEnvelope.length <= 0">
            <img class="nodatabakground" src="../../../assets/images/nodata.png" alt="">
              <span>暂无记录</span>
          </div>
        </div>
        <div class="list_center" v-if="is_withdrawal">
          <van-list
            v-if="withdrawalList.length > 0"
            v-model="loading"
            :finished="finished"
            :finished-text="finished_text"
            @load="onLoad"
            :immediate-check="true"
          >
          <div class="contents" v-for="(item,index) in withdrawalList" :key="index">
            <div class="list_content_title">
              <div class="list_content_titles">提现</div>
              <div class="list_content_title_time">提交申请时间：{{item.addtime | timeFilter}}</div>
            </div>
            <div class="list_content_state">
              <img class="list_content_state_img" v-if="item.state == 2" src="../../../assets/images/shz.png" alt="">
              <img class="list_content_state_img" v-if="item.state == 1" src="../../../assets/images/txcg.png" alt="">
              <img class="list_content_state_img" v-if="item.state == 0" src="../../../assets/images/wtg.png" alt="">
            </div>
            <div class="list_content_money">-{{item.price}}</div>
            <div class="reason" v-if="item.state == 0 && item.reason != ''">失败原因：{{item.reason}}</div>
          </div>
          </van-list>
          <div class="notis" v-if="withdrawalList.length <= 0">
            <img class="nodatabakground" src="../../../assets/images/nodata.png" alt="">
            <span>暂无记录</span>
          </div>
        </div>
    </div>
  </div>

</template>

<script>
import { parseTime } from '@/utils/index'
import http from '@/utils/http'
import api from '@/api'
export default {
  name: "Envelopes",
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
    }
  },
  data () {
    return {
      'loading': false,
      'finished': false,
      'finished_text': '',
      'money':0,
      'total_money':0,
      'envelopes':'list_elopes auto',
      'withdrawal':'list_elopes',
      'is_envelopes':null,
      'is_withdrawal':null,
      'redEnvelope':[],
      'withdrawalList':[],
      'type': 1,
      'params': {
        'page': 1,
        'pagesize': 10
      }
    }
  },
  created(){
    this.initInfo()
    console.log(this.$route.query.type)
    if(this.$route.query.type == 1){
      this.bindWithdrawal()
    }else{
      this.redEnvelopeRecord(true);
    }
  },
  methods: {
    initInfo () {
      http.get(api.envelopes, {})
        .then(res => {
          this.total_money = res.data.total_money
          this.money = res.data.money
        })
        .catch(() => {})
    },
    redEnvelopeRecord(init) {
      this.is_envelopes = true
      this.is_withdrawal = false
      if (init === true) {
        this.params.page = 1
        this.finished_text = ''
        this.finished = false
      }
      http.get(api.record,this.params)
        .then(res => {
          if (init === true) {
            this.show_empty = false
            this.redEnvelope = [...res.data.items]
          } else {
            this.redEnvelope = this.redEnvelope.concat(res.data.items)
          }
          this.loading = false
          // 数据全部加载完成
          if (res.data.items.length < this.params.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.items.length == 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    withdrawalRecord(init) {
      this.is_envelopes = false
      this.is_withdrawal = true
      if (init === true) {
        this.params.page = 1
        this.finished_text = ''
        this.finished = false
      }
      http.get(api.withdrawalRecord,this.params)
        .then(res => {
          if (init === true) {
            this.show_empty = false
            this.withdrawalList = [...res.data.items]
          } else {
            this.withdrawalList = this.withdrawalList.concat(res.data.items)
          }
          this.loading = false
          // 数据全部加载完成
          if (res.data.items.length < this.params.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.items.length == 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    bindEnvelopes(){
       this.redEnvelope=[]
       this.envelopes = 'list_elopes auto'
       this.withdrawal = 'list_elopes'
       this.redEnvelopeRecord(true)
        this.type = 1
        this.loading = false
        this.finished = false
        this.params.page = 1
        this.params.pagesize = 10

    },
    bindWithdrawal(){
      this.withdrawalList = []
      this.envelopes = 'list_elopes'
      this.withdrawal = 'list_elopes auto'
      this.withdrawalRecord(true)
      this.type = 2
      this.loading = false
      this.finished = false
      this.params.page = 1
      this.params.pagesize = 10
    },
    handlerJump (path) {
      this.$router.push(path)
    },
    onLoad () {
      if(this.type==1){
        this.params.page++
        this.redEnvelopeRecord(false)
      }else{
        this.params.page++
        this.withdrawalRecord(false)
      }

    },
  },
}

</script>

<style scoped>
#app{
  height:100%;
}
.list_content_state_img{
  width:50px;
  margin-top: 11px;
}
.reason{
  margin-bottom:10px;
  color:#f1776b;
  font-size:12px;
}
.notis{
  width:157px;
  margin:0 auto;
  margin-top:102px;
  text-align: center;
  height:157px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #414141;
}
.nodatabakground{
  width:157px;
  height:157px;
}
  .top{
    background-image:url("../../../assets/images/qb.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
    width:100%;
    height:143px;
    margin-top: 5px;
  }
  .top .top_box{
    text-align: center;
    padding-top: 37px;
    padding-bottom: 28px;
  }
  .top .top_box .top_title{
      font-size:13px;
      color: #FFFFFF;
  }
  .top .top_box .top_money{
    font-size:36px;
    font-weight: bold;
    margin-top:10px;
    color: #FFFFFF;
  }
  .top .top_box .top_tishi{
    font-size:10px;
    color: #FFD2C6;
  }
  .operation{
    width: 100%;
    height:45px;
    line-height: 45px;
    background: linear-gradient(161deg, #FCF0DA, #F4D6BA);
    border-radius: 13px 13px 0px 0px;
  }
  .operation .operation_money{
    float:left;
    margin-left: 21px;
    color:#C77F3B;
    font-weight: bold;
    font-size: 15px;
  }
  .operation .operation_button{
    float:right;
    width: 93px;
    height: 30px;
    color:#FFFFFF;
    line-height: 30px;
    text-align: center;
    font-size: 15px;
    background: linear-gradient(-18deg, #FF7A21, #F39A5E);
    border-radius: 30px;
    margin-top: 7px;
    margin-right: 19px;
  }
  .list{
      background-color: #FFFFFF;
      width:100%;
      height:100%;
  }
  .list .list_top{
    height:45px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #F0F0F0;
    color: #242424;
  }
  .list .list_top .list_elopes{
    height:45px;
    text-align: center;
    line-height: 45px;
    width:50%;
    float:left;
    position: relative;
  }
  .auto{
    color: #F88C44;
  }
  .auto:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
    width: 21px;
    height: 2px;
    background: #F88C44;
    border-radius: 2px;
  }
  .list .list_centers{
    width:90%;
    border-bottom: 1px solid #F0F0F0;
    margin-left: 20px;
    margin-right: 20px;
  }
  .contents{
    width:90%;
    height:auto;
    border-bottom: 1px solid #F0F0F0;
    margin-left: 20px;
    margin-right: 20px;
  }
  .list .list_content{
    width:90%;
    height:70px;
    border-bottom: 1px solid #F0F0F0;
    margin-left: 20px;
    margin-right: 20px;
  }
  .list  .list_content_title{
    color:#282828;
    font-size:14px;
    float: left;
    margin-top:15px;
  }
  .list   .list_content_money{
    float: right;
    margin-top:22px;
    color:#FE7E28;
    font-weight: 500;
    font-size:14px;
  }
  .list .list_content_title_time{
    margin-top:7px;
    color:#999999;
    font-size:12px;
  }
  .list .list_content_titles{
    font-weight: 500;
    font-family: PingFang SC;
  }
  .list .list_content_state{
    width:100%;
    display: inline;
    margin-left: 31px;
    margin-top:5px;
    padding-top: 11px;
    height:100%;
  }
</style>
